<!--
 * @Author: levi7754 levi7754@163.com
 * @Date: 2025-04-23 15:32:04
 * @LastEditors: levi7754 levi7754@163.com
 * @LastEditTime: 2025-05-25 21:18:24
 * @FilePath: \ruoyi-mall-uniapp\src\sheep\components\s-custom-navbar\components\navbar-item.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="ut-navbar-item">
    <view
      class="ut-nav-title"
      :style="[{ color: data.textColor, width: width }]"
    >
      <button
        class="ut-nav-button"
        size="mini"
        type="default"
        @tap="onTap"
      >
        <uni-icons type="left" size="26" color="#FFF" />
      </button>
      <text style="font-size: 40rpx;">
        {{ customer.customer_name || '测试标题' }}
      </text>
    </view>
    <view v-if="showSearchBar" class="ut-navbar-search" :style="[{ width: width }]">
      <s-search-block
        :placeholder="data.placeholder || $t('app.keywords')"
        :radius="data.borderRadius"
        elBackground="#fff"
        :height="height"
        :width="width"
        @click="sheep.$router.go('/pages/index/search')"
      ></s-search-block>
    </view>
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed } from 'vue';
	const customer = computed(() => sheep.$store('customer').current);

  // 接收参数
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String,
      default: '360px',
    },
    title: {
      type: String,
      default: '',
    },
    showSearchBar: {
      type: Boolean,
      default: false
    }
  });

  const onTap = () => {
    sheep.$store('customer').$patch(state => {
      // state.current = {}
      sheep.$router.redirect('/pages/workbench/customer/customer-home')
      // sheep.$router.redirect('/pages/index/contact')
    })
  }

  const height = computed(() => sheep.$platform.capsule.height);
</script>

<style lang="scss" scoped>
  .ut-navbar-item {
    display: flex;
    flex-direction: column;
    background-color: #EB3924;
    align-items: center;
    justify-content: space-between;
    padding: 12rpx;
    .ut-nav-button {
      background-color: transparent;
      line-height: 1;
      display: inline;
      margin: 0;
      padding-left: 0;
      padding-right: 6rpx;
    }
    .ut-nav-button:after {
      border: none;
    }
  }
  .ut-nav-title {
    font-size: 36rpx;
    color: #FFF;
    text-align: center;
    display: flex;
    align-items: center;
    padding-bottom: 12rpx;
  }

  .menu-icon-wrap {
    .nav-image {
      height: 24px;
    }
  }
</style>
